/*
 * @Description: 车票的详细信息
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:49:50
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:11:45
 */
<template>
  <div
    class="info_main fontsize32"
    v-wechat-title="$route.meta.title"
    :style="{'background-image': bgImg}"
  >
    <div class="scroll_area">
      <!-- 车辆信息 -->
      <div class="ticket_main_info">
        <h3 class="fontsize40">嘉虹2线</h3>
        <p>嘉定新城站 - 虹桥枢纽西交通中心</p>
        <div class="map">
          <i class="iconfont icon-ditu- fontsize48"></i>
        </div>
      </div>
      <div class="ticket_main_area">
        <!-- 中部图标 -->
        <div class="ticket_icon">
          <i class="iconfont icon-bus fontsize60"></i>
        </div>
        <!-- 车票类型 -->
        <div class="ticket_type">次票</div>
        <!-- 车票信息 -->
        <div class="ticket_car">
          <div class="car_title flex-h flex-hsb">
            <p>发车时间</p>
            <p>座位</p>
          </div>
          <div class="car_info flex-h flex-hsb fontsize30">
            <p>2019-06-20 08:20</p>
            <p>4排C座</p>
          </div>
        </div>
        <!-- 跳转刷脸乘车
        <div
          v-if="false"
          class="face_swiping"
        >
          <img :src="imgSrc.faceSwiping">
        </div>-->
        <!-- 二维码 -->
        <div
          v-if="use"
          class="qrcode"
        >
          <div
            class="qrcode_main"
            id="qrcode"
          >
          </div>
          <div class="qrcode_code">Y7u8QmciOuTR</div>
          <div class="qrcode_msg fontsize28">请将二维码对准检票POS机</div>
        </div>
        <div
          v-else
          class="ticket_state"
        >
          <div class="state_icon">
            <i class="iconfont icon-seceed"></i>
          </div>
          <div class="state_msg fontsize38">扫码成功</div>
          <div class="state_info">2019年6月26日07:56</div>
        </div>
        <!-- 操作按钮 -->
        <div class="ctrl_btn">
          <button
            :class="use ? '' : 'score'"
            class="fontsize32"
          >退票</button>
        </div>
      </div>
      <div class="remark fontsize28">
        <p><span>使用说明</span> | 有效期至：2019年6月26日20:00</p>
      </div>
    </div>
    <div
      v-show="screenState"
      class="screen_area"
    >
      <div class="choose_area main_area">
        <h3>选择日期</h3>
        <div class="time_area flex-h flex-hsb flex-hw">
          <p
            v-for="(time, index) in timeList"
            :key="index"
            class="fontsize28"
            :class="timeSelected === index? 'selected_time' : ''"
            @click="timeSelected = index"
          >{{time}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      use: true, // 当前车票是否已使用
      screenState: false, // 是否可以选择日期
      timeList: ['2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一'], // 可选日期
      timeSelected: 0, // 选中的时间下标
      bgImg: require('@static/img/ticket-bg.png')
    }
  },
  mounted() {
    let size = parseFloat(document.getElementsByTagName('html')[0].style.fontSize) // 获取当前根字体大小
    if (this.use) { // 未使用的票生成二维码
      let qrSize = 5.333333 * size
      this.createQRCode(qrSize)
    }
  },
  methods: {
    createQRCode(size) { //  生成二维码的方法
      let qrcode = new QRCode('qrcode', {
        width: size,
        height: size,
        text: 'http://192.168.24.18:8080/#/buy/index', // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      })
      console.log(qrcode)
    }
  }
}
</script>

<style lang="scss" scoped>
html,
body {
  overflow: hidden;
}
.info_main {
  min-height: fill-available;
  box-sizing: border-box;
  background-color: #f2f5f6;
  background-size: 100%;
  background-repeat: no-repeat;
  .scroll_area {
    height: fill-available;
    overflow: auto;
    .ticket_main_info {
      color: #fff;
      text-align: center;
      position: relative;
      padding-bottom: 64px;
      h3 {
        height: 100px;
        line-height: 100px;
      }
      p {
        margin: 32px 0;
      }
      .map {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    .ticket_main_area {
      width: 686px;
      height: 900px;
      margin: auto;
      background-color: #fff;
      border-radius: 8px; /*no*/
      position: relative;
      padding-top: 50px;
      .ticket_icon {
        width: 140px;
        height: 140px;
        margin: 0 auto;
        border-radius: 50%;
        text-align: center;
        line-height: 140px;
        position: absolute;
        top: -40px;
        left: 0;
        right: 0;
        background-color: #fff;
        color: #027aff;
      }
      .ticket_type {
        width: 120px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background-color: #fafafa;
        color: #ccc;
        border: 1px dashed #ccc; /*no*/
        border-top-right-radius: 25px; /*no*/
        border-bottom-right-radius: 25px; /*no*/
      }
      .ticket_car {
        width: 620px;
        margin: 32px auto;
        border-bottom: 1px solid #eee; /*no*/
        .car_title {
          font-weight: 500;
          margin-bottom: 10px;
        }
        .car_info {
          margin-bottom: 12px;
          color: #666;
        }
      }
      .face_swiping {
        width: 620px;
        margin: auto;
        img {
          width: 100%;
        }
      }
      .qrcode {
        text-align: center;
        .qrcode_main {
          width: 400px;
          height: 400px;
          margin: auto;
          margin-top: 32px;
          margin-bottom: 16px;
          img {
            width: 100%;
          }
        }
        .qrcode_code {
          margin-bottom: 16px;
        }
        .qrcode_msg {
          color: #999;
        }
      }
      .ticket_state {
        text-align: center;
        margin-top: 120px;
        .state_icon {
          i {
            font-size: 100px; /*no*/
            color: #027aff;
          }
        }
        .state_msg {
          color: #333;
          margin-top: 26px;
          margin-bottom: 16px;
          font-weight: 500;
        }
        .state_info {
          color: #666;
        }
      }
      .ctrl_btn {
        width: 100%;
        position: absolute;
        bottom: 50px;
        text-align: center;
        button {
          width: 240px;
          height: 64px;
          border-radius: 25px; /*no*/
          color: #0082ff;
          border: 1px solid #0082ff; /*no*/
          background-color: #fff;
        }
        .score {
          background-color: #0082ff;
          border: 1px solid #fff; /*no*/
          color: #fff;
        }
      }
    }
    .remark {
      text-align: center;
      padding: 32px 0;
      p {
        color: #333;
        span {
          color: #000;
        }
      }
    }
  }
  .screen_area {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    .main_area {
      background-color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      border-radius: 8px; /*no*/
    }
    .choose_area {
      width: 686px;
      height: fit-content;
      text-align: center;
      padding: 0 32px;
      padding-bottom: 32px;
      box-sizing: border-box;
      h3 {
        height: 76px;
        line-height: 76px;
        border-bottom: 1px solid #eee; /*no*/
      }
      .time_area {
        height: 400px;
        overflow: auto;
        p {
          height: 52px;
          line-height: 52px;
          padding: 0 12px;
          margin-top: 16px;
          background-color: #f0f4fd;
          color: #027aff;
          border-radius: 4px; /*no*/
        }
        .selected_time {
          color: #fff;
          background-color: #027aff;
        }
      }
    }
  }
}
</style>
